<template>
	<!-- 关联沟通组件 -->
	<div>
		<u-popup safe-area-inset-bottom v-model="show" mode="left">
			<view style="">
				<customNavbar title="关联的沟通记录" @back="show = false" rightText="确定" @clickRight="navbarClickRight">
				</customNavbar>
			</view>
			<!-- 搜索区域 -->
			<div style="position: fixed;width: 99%;background-color: #fff;z-index: 999;">
				<div v-if="isSearch" style="margin-top: 10px;">
					<uni-search-bar style="color:#fff" :textColor="'#ccc'" @confirm="search"
						v-model="queryParam.Keyword" @clear="clear" placeholder="请输入产品名称"
						@cancel="clear"></uni-search-bar>
				</div>
			</div>

			<!-- 列表区域 -->
			<div class="outerBox" style="width:600rpx;">
				<scroll-view style="width: 100%;height: 100%;padding-top: 20rpx;" scroll-y="true"
					@scrolltolower="lower">
					<!-- class="ckbxcli" -->
					<view
						style="padding-left: 20rpx;padding-right: 20rpx;border:1px solid #ccc;margin: 20rpx;border-radius:10rpx"
						v-for="(item, index) in data" :key="index">
						<view
							style="display: flex;justify-content:space-between; padding-top: 20rpx;border-bottom :1px solid #ccc;padding-bottom: 20rpx;">
							<view class="text-ellipsis" style="flex: 8;">{{item.DailyRecordTitle}}
							</view>
							<view style="flex: 2;display:flex;justify-content: flex-end;">
								<u-checkbox @change="checkboxChange($event, item,index)" v-model="item.checked"
									:disabled="item.disabled" :name="JSON.stringify(item)" :size="45"
									:value="item.Id"></u-checkbox>
							</view>
						</view>
						<view @click="customerChoice(item, index)" style="">
							<view v-if="item.SharerNameList" style="padding: 20rpx 0;">
								<!-- <view style="margin: 10rpx 0;">{{item.CustomerName}}</view> -->
								<uni-tag v-for="(v, i) in item.SharerNameList" style="letter-spacing: 5px"
									type="primary" :text="v"> </uni-tag>
							</view>
							<view style="padding: 20rpx 0;">
								沟通内容: <span class="content" v-html="item.DailyRecord"></span>
							</view>

						</view>

					</view>

					<div style="padding-bottom: 20px;">
						<LoadingMore :status="status" :contentText="contentText" :rows="data"></LoadingMore>
					</div>
				</scroll-view>
			</div>
		</u-popup>
	</div>
</template>

<script>
	// import PaginationCom from "@/components/PaginationCom.vue";
	import {
		// 客户关联沟通记录列表数据
		SalesmanDailyRecordGetDataListReimburse
	} from '@/api/interface.js'
	export default {
		props: {
			isSearch: {
				type: Boolean,
				default: false
			}
		},
		components: {},
		data() {
			return {
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '轻轻上拉',
					contentrefresh: '努力加载中...',
					contentnomore: ''
				},
				isSearchProduct: false,
				Prceid: "",
				prd: {},
				pageNo: 1,
				PageRows: 10,
				prdlist: [],
				loading: false,
				finished: false,
				pagination: {
					current: 1,
					pageSize: 10,
				},
				Total: 0,
				// 选中的产品列表
				selectedRowKeys: [],
				queryParam: {
					Condition: "cInvName",
					Keyword: ""
				},
				entity: {},
				judgment: true,
				// 关联沟通记录列表数据
				data: [{
						CreateTime: "2023-04-07 09:42:19.000",
						CreatorId: "1601111195224379392",
						CustomerId: "1587012096573313024",
						CustomerName: "张家港市民华塑胶有限公司",
						DRKeyWord: null,
						DRKeyWordList: null,
						DailyRecord: "<p>Q373-20230309-q2-民华草丝</p><p>Q375-20230327-q1-常州圣雅膜（3组）</p>",
						DailyRecordDate: "2023-04-07 09:40:26.000",
						DailyRecordTitle: "Q373-20230309-q2-民华草丝  Q375-20230327-q1-常州圣雅膜（3组）",
						Deleted: false,
						Id: "1644153594976407552",
						Remark: null,
						SDRDTOList: [{
							CreateTime: "2023-04-07 09:42:19.000",
							CreatorId: "1601111195224379392",
							Deleted: false,
							FileURL: "http://121.36.26.224:9101/SalesmanDailyRecord/20230407/a9279e0841a347ca99b89a2719de2b07/Q373-明华草丝实验.xlsx",
							Id: "1644153594980601856",
							RelationId: "1644153594976407552",
							Remark: null,
							UpdateTime: "2023-04-07 09:42:19.000",
						}],
						SalesmanId: "1601111195224379392",
						SalesmanName: "谢琪",
						SharerIds: "1567693744369569792",
						SharerNameList: ["张永松"],
						UpdateTime: "2023-04-07 09:42:19.000"
					},
					{
						CreateTime: "2022-11-03 14:21:53.000",
						CreatorId: "1568057135399440384",
						CustomerId: "1587012103758155776",
						CustomerName: "北京九通功能塑料制品技术开发有限公司",
						DRKeyWord: null,
						DRKeyWordList: null,
						DailyRecord: "<p>内容jifoawjefoiaw</p><p><br></p><p>agewafgew</p><p>gawe</p><p><br></p>",
						DailyRecordDate: "2022-11-03 14:20:59.000",
						DailyRecordTitle: "客户沟通1121",
						Deleted: false,
						Id: "1588053833639006208",
						Remark: null,
						SDRDTOList: [],
						SalesmanId: "1568057135399440384",
						SalesmanName: "刘罡",
						SharerIds: "1569566577127329792|1567693744369569792",
						SharerNameList: ["张永松", "赵莉030110"],
						UpdateTime: "2022-11-03 14:21:53.000"
					}
				],
				show: false,
				Id: "",
				// 选中的沟通记录列表
				selectedCommunicationList: [],
				// 传递过来的客户id数组
				CusIds: []
			};
		},
		created() {
			// 初始默认检索提示
			this.isSearchProduct = true
		},
		methods: {
			subTitle(value) {
				let time = ""
				if (value) {
					time = this.$moment(value).format("YYYY-MM-DD")
				}
				return time
			},
			// 触底
			lower(e) {
				if (this.data.length >= this.pagination.Total) return
				// 上拉加载
				this.pagination.current++;
				// 暂时注释
				// this.getDataList()
			},
			// 顶部导航栏右侧按钮确定
			navbarClickRight() {
				console.log('确定了', this.entity, this.data, this.CommunicationList)
				// 判断选中的沟通记录列表是否有数据  没有数据禁止下一步
				// if (this.selectedCommunicationList.length == 0) {
				// 	this.$errorToast('至少选择一个关联的沟通记录')
				// 	return
				// }
				this.$emit('CommunicationConfirm', this.data)
				this.show = false
			},
			// 沟通记录列表选择
			checkboxChange(event, item, index) {
				let obj = JSON.parse(event.name)
				if (event.value == true) {
					this.selectedCommunicationList.push(obj)
				} else {
					this.selectedCommunicationList = this.selectedCommunicationList.filter(v => v.Id !== obj.Id)
				}
				console.log('选择额----', event, item, index, this.data)
				this.$forceUpdate()
			},
			paginationchange(a, b) {
				this.pagination.current = a;
				this.getDataList();
			},
			//返回
			onClickLeft() {
				// 数据重置
				this.data = []
				this.entity = {}
				this.show = false;
				// 显示检索提示
				this.isSearchProduct = true
				//返回时候清空输入框的值
				this.queryParam.Keyword = ""
			},
			clear() {
				this.queryParam = [];
				this.getDataList();
			},
			//搜索
			search() {
				this.isSearchProduct = false
				// if (this.finished) {
				this.queryParam.Condition = "cInvName";
				// this.pageNo = 1;
				// this.PageRows = 9999;
				// 获取产品列表
				this.getDataList();
				// }else{
				//   alert(this.data.length)
				//   // console.log(this.data.length );
				//   Toast('请等数据加载完后再进行查找')
				// }
			},

			customerChoice(item, index) {
				this.$set(item, "checked", !item.checked);
			},
			//选中后确定按钮
			onClickRight() {
				this.prdlist = this.data.filter(item => item.checked == true);

				this.$emit("Product", this.prdlist);
				this.show = false;
				// 重置化显示检索信息
				this.isSearchProduct = true
				this.data = []
				this.queryParam.Keyword = ""
			},
			// 获取关联的沟通列表列表数据
			getSalesmanDailyRecordGetDataListReimburseList(list) {
				this.status = "loading";
				uni.showLoading({
					title: '加载中'
				})
				SalesmanDailyRecordGetDataListReimburse({
						PageIndex: this.pagination.current,
						PageRows: this.pagination.pageSize,
						SortField: "Id",
						SortType: "asc",
						Search: {
							Condition: this.queryParam.Condition,
							Keyword: this.queryParam.Keyword,
							// 关联的客户数组ID
							CusIds: this.CusIds
						}
					})
					.then(resJson => {
						// 赋值总条数
						this.Total = resJson.Total;
						if (resJson.Data.length == 0 || resJson.Data == null) {
							this.status = "noMore"
							uni.hideLoading()
							this.loading = false;
							return
						}
						if (this.pagination.current == 1) {
							this.data = resJson.Data
						} else {
							// 有数据 赋值列表 加载状态结束
							this.data = this.data.concat(resJson.Data)
						}
						this.data.forEach(item => {
							item.checked = false
						})
						// 判断传递过来的沟通记录选中是否已经勾选  如果已有选中的该条沟通记录 做禁用状态 不得再次选中
						if (list) {
							this.data.forEach(item => {
								list.forEach(v => {
									if (item.Id === v.Id) {
										item['disabled'] = true
									}
								})
							})
						}
						console.log('获取关联的沟通列表数据', this.data)

						// 如果list长度大于等于总数据条数，数据全部加载完成
						if (this.data.length >= resJson.Total) {
							this.status = "noMore"
							this.loading = false;
							uni.hideLoading()
							return
						}
					});
			},
			init() {
				// 数据初始化
				this.data = []
				this.show = true
			},
			openForm(CustomIdArr, salesmanDailyRecords) {
				// 根据选择的客户列表 过滤出id 获取关联的沟通记录
				let CusIds = CustomIdArr.map(item => {
					return item.Id
				})
				this.CusIds = CusIds
				console.log('获取过来选择的客户列表数据this.CusIdsthis.CusIds-----------------------------------------', CustomIdArr,
					this.CusIds, salesmanDailyRecords)
				this.init()

				// 	// 客户关联沟通记录列表数据
				this.getSalesmanDailyRecordGetDataListReimburseList(salesmanDailyRecords)
			}
		}
	};
</script>

<style scoped>
	/* 覆盖uniapp顶部导航栏左侧文字颜色 */
	.uni-navbar>>>.uni-nav-bar-right-text {
		color: #1959FA !important;
	}

	/* 	.uni-navbar>>>.uni-icons {
		color: #1959FA !important;
	} */

	/* .uni-navbar>>>.uni-navbar-btn-text>span {
		color: #1959FA !important;
	} */

	::v-deep.u-checkbox[data-v-532d01c7] {
		display: flow-root !important
	}

	.search-none {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.pagination {
		position: absolute;
		bottom: 5px;
		right: 20%;
	}

	.checked {
		position: absolute;
		right: 10px;
		top: 10px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 10%;
	}

	.outerBox {
		/* 	height: calc(100vh - 120px);
		padding-bottom: 50px;
		box-sizing: border-box;
		overflow: auto; */
		/* #ifdef H5 */
		height: calc(100vh - 50px);
		/* #endif */
		/* #ifdef APP */
		height: calc(100vh - 220px);
		/* #endif */
	}

	.nav {
		position: fixed;
		width: 100%;
	}

	.ckbxcli {
		border: 1px solid Gainsboro;
		margin: 20rpx;
		padding: 10rpx 25rpx;
		height: 100px;
		/* position: relative;
		
		width: 95%; */

		/* 	text-align: center;
		margin-left: 2%;
		margin-top: 6px;
		margin-bottom: 6px;
	
		cursor: pointer;
		
		list-style-type: none;
		display: inline-block; */
	}

	ul {
		/* margin-top: 10px; */
	}
</style>